<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 作业一************************************************* -->
    <div class="boxone">
        <div class="container">
            <div class="title">我真的很喜欢抱着理疗伤口的护士姐姐</div>
            <div class="c">我的猫猫从那时很小刚来家里的时候，我就在这家医院找周医生看病，看着周医生医术越来越好，护士姐姐也越来越漂亮温柔，医院设备越来越齐全，即使家住在新都也要折腾大半个成都市来这里看病，更加庆幸坚定在这里做各种治疗的决定。这次胸部穿孔感染两个地方，</div>
        </div>
        <div class="triangle"></div>
        <div class="bottom">
            <div class="circle"><img src="./img.png" alt=""></div>
            <div class="text"><b style="color: #fff;">@笨仓鼠666</b></div>
        </div>
    </div>
    <p style="font-size: 30px;">下面是作业二</p>
    <!-- 作业二************************************************* -->
    <div class="boxtwo">
        <div class="left">
            <img src="./img.png" alt="">
        </div>
        <div class="right">
            <div class="one">
                <b style="color: #000;">品牌简介</b> / 01
            </div>
            <div class="two">
                  品牌简介美容美发连钱机构创办于2006年。日前拥有六十五家直营注锁店，- -家教育中心。员工180多名、大多为优秀的美容师。发型师，中高级管理人员。同时也为美容美发市场墙养了大批美容美发人才。随着市场的变化,公司不断建内专业化。系统化。规模化。粗睡了市场。运营、教育。人力资源财务，行政等相关部门。逐步形成了完善的运营体系，形威集团化管理，已经拥有-支严谨高效。积极退取的学习型大团队。立足于美容美发
            </div>
            <div class="three">
                查看更多
            </div>
        </div>
        <img src="./left.png" class="arrowsl" alt="">
        <img src="./right.png" class="arrowsr" alt="">
    </div>
    <p style="font-size: 30px;">下面是作业三</p>
    <!-- 作业三************************************************* -->
    <div class="boxthree">
        <div class="container">
            <div class="one">
                <div class="left">新品上市</div>
                <div class="right">品牌介绍</div>
            </div>
            <div class="two">
                <img src="./img.png" alt="">
            </div>
            <div class="three">
                <span style="color: #000;">(小棕瓶)第六代</span> PAPA RECPEPE面膜系列春雨蜂蜜面膜10片
            </div>
            <div class="four">
                <div class="red">¥198.00元</div>
                <div class="small">¥321.00元</div>
            </div>
        </div>
    </div>
    <p style="font-size: 30px;">下面是作业四</p>
    <!-- 作业四************************************************* -->
    <div class="boxfour">
        <div class="left">
            <img src="./img.png" alt="">
        </div>
        <div class="right">
            <div class="x">
                ×
            </div>
            <div class="one">
                订阅我们
            </div>
            <div class="c">
                立即赠送9折优惠券，仅限一次使用。性别
            </div>
            <div class="two">
                <form action="">
                    <span>性别</span>
                    <div class="first">
                        <input type="radio" name="sex" checked>男士
                        <input type="radio" name="sex">女士
                    </div>
                    <input type="text" placeholder="称呼" class="inputo">
                    <input type="email" placeholder="邮箱" class="inputt">
                    <div class="sc">
                        <input type="text" placeholder="验证码" class="inputth">
                        <div class="image">
                            <img src="./img.png" alt="">
                        </div>
                    </div>
                    <div class="ok">提交信息</div>
                    <div class="no">今日不提醒</div>
                </form>
            </div>
        </div>
    </div>
</body>
<style>
     .boxone{
         width: 459px;
         height: 376px;
        box-sizing: border-box;
        padding:34px 27px 0 27px; 
        background-image: linear-gradient(to right top, #269582, #3AAE99,#279B88);
     }
     .boxone>.container{
        box-sizing: border-box;
        padding: 35px 45px 45px 30px;
        background-color: #C4E7E1;
        font-size: 13px;
        color: #546866;
        box-shadow: inset 0 0 1px #AFF0E6;
     }
     .boxone>.container>.title{
         width: 100%;
         text-align: center;
         font-weight: 900;
         color: #000;
         font-size: 16px;
         margin-bottom: 20px;
     }
     .boxone>.container>div>b{
        border: 1px solid red;
        text-align: center;
        font-size: 16px;
        color: #000;
        margin-bottom: 15px;
     }
     .boxone>.triangle{
         width: 0;
         height: 0;
         border: 12px solid;
         border-color: #6CB7A7 transparent transparent;
         margin: 1px 0 3px;
         transform: translateX(42px);
     }
     .boxone>.bottom{
         display: flex;
         align-items: flex-start;
     }
     .boxone>.bottom>.circle{
         width: 75px;
         height: 75px;
         position: relative;
         background-color: #309A84;
         border: 2px solid #fff;
         border-radius: 50%;
         margin-left: 20px;
     }
     .boxone>.bottom>.circle>img{
         width: 60px;
         height: 60px;
         border-radius: 50%;
         border: 2px solid #fff;
         display: flex;
         align-items: center;
         justify-content: center;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%,-50%);
     }
     .boxone>.bottom>.text{
         margin-left: 20px;
     }
     /* 作业二******************* */
     .boxtwo{
         width: 1410px;
         height: 314px;
         box-sizing: border-box;
         padding: 30px 65px 30px;
         display: flex;
         justify-content: space-between;
         box-shadow: 0 0 2px #999;
         position: relative;
     }
     .boxtwo>.left{
         width: 612px;
         height: 260px;
         margin-right: 30px;
     }
     .boxtwo>.left>img{
         width: 612px;
         height: 260px;
     }
     .boxtwo>.right{

     }
     .boxtwo>.right>.one{
         color: #E12138;
         font-size: 21px;
     }
     .boxtwo>.right>.two{
        font-size: 15px;
        color: #AAAAAA;
        line-height: 26px;
        margin-top: 25px;
        margin-bottom: 22px;
        text-indent: 20px;
     }
     .boxtwo>.right>.three{
         width: 88px;
         height: 38px;
         background-color: #DD001B;
         display: flex;
         align-items: center;
         justify-content: center;
         color: #fff;
         font-size: 14px;
         border-radius: 5px;
     }
     .arrowsl{
         position: absolute;
         width: 30px;
         height: 100px;
         left: 20px;
         top: 50%;
         transform: translateY(-50%);
     }
     .arrowsr{
         position: absolute;
         width: 30px;
         height: 100px;
         right: 20px;
         top: 50%;
         transform: translateY(-50%);
     }
     /* 作业三************************ */
     .boxthree{
         width: 325px;
         height: 433px;
         box-shadow: 0 0 1px #999;
         display:inline-block;
     }
     .boxthree>.container{
         width: 300px;
         height: 405px;
         margin: 15px auto;
         box-sizing: border-box;
         padding: 10px 12px 30px 10px;
         border: 1px #FC80A9 solid;
     }
     .boxthree .one{
         width: 100%;
         display: flex;
         justify-content: space-between;
         align-items: flex-start;
     }
     .boxthree .left{
         background-color: #80B53F;
         font-size: 14px;
         color: #fff;
         width: 41px;
         height: 41px;
         text-align: center;

     }
     .boxthree .right{
         font-size: 14px;
         color: #B4B4B4;
     }
     .boxthree .two{
         width: 100%;
         height: 255px;
         display: flex;
         align-items: center;
         justify-content: center;
     }
     .boxthree img{
         width: 140px;
         height: 215px;
     }
     .boxthree .three{
         color: #9B9B9B;font-size: 15px;
         line-height: 17px;
     }
     .boxthree .four{
         margin-top: 20px;
         display: flex;
         align-items: flex-end;
     }
     .boxthree .red{
         color: #FC4B8A;
         font-size: 19px;
     }
     .boxthree .small{
         color: #9C9C9C;
         font-size: 14px;
         text-decoration:line-through ;
         margin-left: 5px;
     }
     /* 作业四***************** */
     .boxfour{
         width: 799px;
         height: 616px;
         box-shadow: 0 0 1px #999;
         display: flex;
         justify-content: space-between;
     }
     .boxfour .left{
         width: 465px;
         height: 100%;
     }
     .boxfour .left img{
         width: 100%;
         height: 100%;
     }
     .boxfour .right {
         box-sizing: border-box;
         padding: 20px;
         width: 332px;
     }
     .boxfour .x{
         color: #CDCDCD;
         font-size: 45px;
         margin-bottom: 35px;
         display: flex;
        justify-content: flex-end;
     }
     .boxfour .one{
        color: #46555C;
        font-size: 25px;
        margin-bottom: 30px;
     }
     .boxfour .c{
         font-size: 14px;
         color: #373F48;
     }
     .boxfour .two{
         margin-top: 25px;
     }
     .boxfour .first{
         margin-top: 25px;
         margin-bottom: 33px;
     }
     .inputo{
         margin-bottom: 20px;
         width: 280px;
         height: 35px;
     }
     .inputt{
         margin-bottom: 20px;
         width: 280px;
         height: 35px;

     }
     .inputth{
         width: 190px;
         height: 35px;
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
     }
     .image{
         width: 105px;
         display: flex;
         justify-content: center;
         align-items: center;
         border: 1px solid #E5EBED;
         border-left: 0;
     }
     .image img{
         width: 95px;
         height: 25px;
     }
     .sc{
         width: 290px;
         margin-bottom: 20px;
        display: flex;
        justify-content: flex-start;
        background-color: #F3F7F9;
     }
     .ok{
         width: 290px;
         height: 30px;
         background-color: #C1B497;
         color: #fff;
         margin-bottom: 20px;
         display: flex;
         align-items: center;
         justify-content: center;
     }
     .no{
         width: 290px;
         height: 30px;
         display: flex;
         align-items: center;
         justify-content: center;
         background-color: #000;
         color: #fff;
     }
     input{
         border: 1px solid #E5EBED;
     }
</style>
</html>